<script setup>
import {ref} from 'vue';

const classValue = ref(" ");


</script>

<!--database viewer上半部分的左边内容-->
<!--包含：一个下拉框、多行选项框-->
<template>
  <div id="dataUp-left">
    <!--下拉框-->
    <div>
      <span style="margin:0 5px">Type</span>
      <select class="MissD-dropdown-option">
        <option value="option1">Facility</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
    </div>

    <!-- 选项区域 -->
    <div>
      <div class="op-up">
        <div class="border">
          <div class="border-title">
            <span>Filter by...</span>
          </div>
          <!-- 第一行文字 -->
          <div class="input-row">
            <span>Class:</span>
            <input v-model="classValue" class="right-aligned-input">
          </div>
          <!-- 第二行文字 -->
          <div class="input-row">
            <span>Country:</span>
            <select class="MissD-dropdown-option right-aligned-select">
              <option value="option1">None</option>
              <option value="option2">Option 2</option>
              <option value="option3">Option 3</option>
            </select>
          </div>
          <!-- 第三行文字 -->
          <div class="input-row">
            <span>Hypothetical:</span>
            <select class="MissD-dropdown-option right-aligned-select">
              <option value="option1">Show all platforms, both rea</option>
              <option value="option2">Option 2</option>
              <option value="option3">Option 3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#dataUp-left {
  height: 100px;
}
.border-title{
  width: 15%;
}
.op-up {
  display: flex;
  flex-direction: column;
}

.input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-aligned-input,
.right-aligned-select {
  width: 60%;
  text-align: left; /* 将文本内容左对齐 */
}

.right-aligned-input {
  margin-left: 8px;
}

</style>